<template>
  <div>
    <el-form
      :inline="true"
      :model="form"
      size="small"
      class="searchForm bg-gray flex flex-wp flex-a-c"
    >
      <el-form-item label="码牌号码">
        <el-input v-model="form.qrCode"></el-input>
      </el-form-item>
      <el-form-item label="批次号">
        <el-input v-model="form.batchNo"></el-input>
      </el-form-item>
      <el-form-item label="代理商">
        <el-input v-model="form.tokerUserName"></el-input>
      </el-form-item>

      <el-button icon="el-icon-search" @click="search()" size="small"
        >查询</el-button
      >
      <el-button @click="exportExcel()" size="small">导出</el-button>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="showModal()"
        >新增电子码牌</el-button
      >
    </el-form>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 + (pageInfo.pageindex - 1) * pageInfo.pagesize }}
        </template>
      </el-table-column>
      <el-table-column prop="qrCode" label="码牌号码" align="center">
      </el-table-column>
      <el-table-column
        prop="batchNo"
        label="码牌批次号"
        align="center"
      ></el-table-column>
      <el-table-column label="使用状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.status == 1 ? "正常" : "禁用" }}
        </template>
      </el-table-column>
      <el-table-column label="分配状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.divideStatus == 1 ? "未分配" : "已分配" }}
        </template></el-table-column
      >
      <el-table-column
        prop="mercName"
        label="绑定商户"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="tokerUserName"
        label="所属代理商"
        align="center"
      ></el-table-column>

      <el-table-column label="创建时间" align="center" width="200">
        <template slot-scope="scope">
          {{ new Date(scope.row.addTime).Format("YYYY-MM-DD hh:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="100"
        class-name="actionTd"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            v-if="scope.row.status === 1"
            round
            @click="editStatus(scope.row.id, 2)"
            type="danger"
          >
            停用</el-button
          >
          <el-button
            size="mini"
            v-if="scope.row.status === 2"
            round
            type="success"
            @click="editStatus(scope.row.id, 1)"
          >
            启用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="text-c margin-t-d">
      <el-pagination
        @current-change="getDataList"
        :current-page.sync="pageInfo.pageindex"
        :page-size="pageInfo.pagesize"
        background
        layout="total,prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="新增电子码牌"
      :visible.sync="commentVisible"
    >
      <el-form :model="modalData" label-width="140px">
        <el-form-item label="新增码牌数量">
          <el-input-number
            :step="1"
            :min="0"
            v-model="modalData.num"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="所属代理商">
          <el-select
            v-model="modalData.tokerUserId"
            filterable
            remote
            placeholder="无"
            :remote-method="remoteMethod"
            :loading="loading"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.userId"
              :label="item.nickName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-c">
        <el-button size="small" round @click="commentVisible = false"
          >取 消</el-button
        >
        <el-button size="small" round type="primary" @click="submit()"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      form: {
        qrCode: "",
        tokerUserName: "",
        batchNo: "",
      },
      qdForm: {},
      pageInfo: {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }, //页码
      loading:false,
      tableData: [], //表格数据
      commentVisible: false,
      modalData: {
        num: 0,
        tokerUserId: "",
      },
      options: [],
    };
  },

  beforeMount() {
    this.search();
  },
  methods: {
    showModal() {
      this.modalData = {
        num: 0,
        tokerUserId: "",
      };
      this.commentVisible = true;
    },
    submit() {
      let params = { ...this.modalData };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      params.tokerUserId = params.tokerUserId || 0;
      this.$ajax
        .postData("adm/device/addQrCode", params)
        .then((data) => {
          loading.close();
          this.$message({
            type: "success",
            message: "提交成功",
          });
          this.commentVisible = false;
          this.getDataList();
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    search() {
      this.qdForm = {
        ...this.form,
      };
      this.pageInfo = {
        pagesize: 10,
        pageindex: 1,
        total: 0,
      }; //页码
      this.getDataList();
    },

    getDataList() {
      let params = {
        pageNum: this.pageInfo.pageindex,
        pageSize: this.pageInfo.pagesize,
        ...this.qdForm,
      };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .getData("adm/device/page", params)
        .then((data) => {
          loading.close();
          this.tableData = data.resData.data;
          this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },

    editStatus(id, status) {
      this.$confirm(`是否确定${status == 1 ? "启用" : "停用"}?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          this.$ajax
            .postData("adm/device/update", {
              id,
              status,
            })
            .then((data) => {
              loading.close();
              this.$message({
                type: "success",
                message: `${status == 1 ? "启用" : "停用"}成功!`,
              });
              this.getDataList();
            })
            .catch((error) => {
              loading.close();
              this.$message({
                message: error.codeDes || error.message,
                type: "error",
              });
            });
        })
        .catch(() => {});
    },
    remoteMethod(query) {
      let params = {
        pageNum: 1,
        pageSize: 100,
        req: {
          agent: query,
        },
      };
      this.loading = true;
      this.$ajax
        .postData("adm/agent/pageList", params)
        .then((data) => {
          this.loading = false;
          this.options = data.resData.data;
        })
        .catch((error) => {
          this.loading = false;
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    exportExcel() {
      let params = {
        ...this.qdForm,
      };
      const loading = this.$loading({
        lock: true,
        text: "正在导出...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$ajax
        .getFileData("adm/device/export", params)
        .then((data) => {
          loading.close();
          // this.tableData = data.resData.data;
          // this.pageInfo.total = data.resData.count;
        })
        .catch((error) => {
          loading.close();
          this.$message({
            message: error.codeDes || error.message,
            type: "error",
          });
        });
    },
    download(res, type, filename){
      // 创建blob对象，解析流数据
      const blob = new Blob([res], {
        // 设置返回的文件类型
        type: type,
      }); // 这里就是创建一个a标签，等下用来模拟点击事件
      const a = document.createElement("a"); // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
      const URL = window.URL || window.webkitURL; // 根据解析后的blob对象创建URL 对象
      const herf = URL.createObjectURL(blob); // 下载链接
      a.href = herf; // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
      a.download = filename;
      document.body.appendChild(a); // 点击a标签，进行下载
      a.click(); // 收尾工作，在内存中移除URL 对象
      document.body.removeChild(a);
      window.URL.revokeObjectURL(herf);
    },
  },
};
</script>